import {ROOT-STYLES} from "../../themes/index.slint";
import { SText } from "../../index.slint";

global themes {
    in property <[{name:string,c:[{color:brush,name:string}]}]> colors:[
      {name:"light",c:[{name:"weakest",color:#F6F6F6},{name:"weaker",color:#E0E0E0},{name:"normal",color:#FFFFFF},{name:"deeper",color:#F5F5F5},{name:"deepest",color:#C8C8C6},{name:"font",color:#212121},{name:"opacity",color:#E0E0E088}]},
      {name:"primary",c:[{color:#88D0EC,name:"weakest"},{name:"weaker",color:#6CB8F7},{name:"normal",color:#3AA1F5},{name:"deeper",color:#1891F3},{name:"deepest",color:#0B86F1},{name:"font",color:#e5ffff},{name:"opacity",color:#3AA1F588}    ]},
      {name:"success",c:[{color:#8FCEC4,name:"weakest"},{name:"weaker",color:#61BF84},{name:"normal",color:#38A762},{name:"deeper",color:#21964A},{name:"deepest",color:#118A3D},{name:"font",color:#e5fffb},{name:"opacity",color:#38A76288}    ]},
      {name:"info",c:[{color:#F6F6F6,name:"weakest"},{name:"weaker",color:#eaeaea},{name:"normal",color:#E0E0E0},{name:"deeper",color:#D2D2D2},{name:"deepest",color:#BDBDBD},{name:"font",color:#484848},{name:"opacity",color:#E0E0E088}]},
      {name:"warning",c:[{color:#ffd5bd,name:"weakest"},{name:"weaker",color:#FCBD99},{name:"normal",color:#F9A677},{name:"deeper",color:#F9955C},{name:"deepest",color:#F8894A},{name:"font",color:#fff4ec},{name:"opacity",color:#F9A67788}]},
      {name:"error",c:[{color:#e9a7a7,name:"weakest"},{name:"weaker",color:#f48989},{name:"normal",color:#ed5e5e},{name:"deeper",color:#ed4e4e},{name:"deepest",color:#ed3b3b},{name:"font",color:#ffe5e4},{name:"opacity",color:#ed4e4e88}]},
      {name:"dark",c:[{color:#707070,name:"weakest"},{name:"weaker",color:#616161},{name:"normal",color:#424242},{name:"deeper",color:#242424},{name:"deepest",color:#000000},{name:"font",color:#BDBDBD},{name:"opacity",color:#42424288}]}
    ];
}

export component TestColor inherits Window {
  height: 1400px;
  width: 1100px;
  VerticalLayout {
    height: 1400px;
    width: root.width -100px;
    for t in themes.colors: Rectangle {
      HorizontalLayout{
        SText { 
          font-size: 18px;
          font-weight: 700;
          text: @tr("theme:{}",t.name);
        }
        Rectangle {
          height: 200px;
          width: 800px;
          VerticalLayout {
            HorizontalLayout {
              for c[index] in t.c: SText{
                text: c.name;
                width: parent.width/7;
              }
            }
            HorizontalLayout {
              for c[index] in t.c: Rectangle {
                height: 120px;
                width:parent.width/7;
                background: c.color;
              }
            }
          }
        }
      }

    }
    
  }
}